import { memo, useEffect } from 'react';
import type { FC } from 'react';
import { Form, Input, Checkbox, Space, Button } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { nanoid } from '@reduxjs/toolkit';
import { QuestionCheckboxPropsType, OptionType } from './Interface';

const PropComponent: FC<QuestionCheckboxPropsType> = (
  props: QuestionCheckboxPropsType
) => {
  const { title, isVertical, list = [], onChange, disabled } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ title, isVertical, list });
  }, [title, isVertical, list, form]);

  const handleValuesChange = () => {
    if (onChange) {
      const newValues: QuestionCheckboxPropsType = form.getFieldsValue();
      const { list = [] } = newValues;
      list.forEach((opt: OptionType) => {
        if (!opt.value) {
          opt.value = nanoid(5);
        }
      });
      onChange(newValues);
    }
  };

  return (
    <Form
      layout="vertical"
      initialValues={{ title, isVertical, list }}
      form={form}
      disabled={disabled}
      onValuesChange={handleValuesChange}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: '请输入标题' }]}
      >
        <Input placeholder="请输入标题" />
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="list">
          {(fields, { add, remove }) => {
            return (
              <>
                {fields.map(({ key, name }, index) => {
                  return (
                    <Space key={key} align="baseline">
                      <Form.Item
                        name={[name, 'checked']}
                        valuePropName="checked"
                      >
                        <Checkbox />
                      </Form.Item>
                      <Form.Item
                        name={[name, 'text']}
                        rules={[
                          { required: true, message: '请输入选项' },
                          {
                            validator: (_, text) => {
                              const { list = [] } = form.getFieldsValue();
                              let num = 0;
                              list.forEach((opt: OptionType) => {
                                if (opt.text === text) num++;
                              });
                              if (num <= 1) return Promise.resolve();
                              return Promise.reject(new Error('选项重复'));
                            },
                          },
                        ]}
                      >
                        <Input placeholder="请输入选项" />
                      </Form.Item>
                      {index > 0 && (
                        <MinusCircleOutlined onClick={() => remove(name)} />
                      )}
                    </Space>
                  );
                })}
                <Form.Item>
                  <Button
                    type="link"
                    onClick={() => add({ text: '', value: '', checked: false })}
                    icon={<PlusOutlined />}
                    block
                  >
                    添加选项
                  </Button>
                </Form.Item>
              </>
            );
          }}
        </Form.List>
      </Form.Item>
      <Form.Item valuePropName="checked" name="isVertical">
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  );
};

export default memo(PropComponent);
